@import "../../common";

.store-container {
  box-sizing: border-box;
  padding: 32rpx 24rpx;
  border-radius: 24rpx;
  border: 2rpx solid transparent;
  position: relative;

  &.active {
    border-color: var(--color-theme);
    .active {
      opacity: 1;
    }
  }

  .drivin-school {
    @include flex;

    image {
      @include size(40, 40);
    }

    text {
      @include fontStyle(32, 32, #000000, 500);
      margin-left: 10rpx;
    }
  }

  .line {
    @include flex-space-between;
    padding: 24rpx 0 0 0;
    align-items: flex-start;

    .left {
      @include flex;
      @include fontStyle(28, 28, #666666, 400);
      width: calc(100% - 130rpx);
      align-items: flex-start;
      text {
        color: #666666;
        width: calc(100% - 40rpx);
        line-height: 42rpx;
      }

      image {
        margin:9rpx 8rpx 0 0;
        @include size(24, 24);
      }
    }

    .right {
      @include flex;
      @include fontStyle(28, 42, #666666, 400);
      width: 120rpx;
      text-align: right;
      justify-content: flex-end;
      input {
        text-align: right;
        @include fontStyle(28, 28, #000000, 400);
      }

      image {
        margin-left: 8rpx;
        @include size(24, 24);
      }
    }
  }

  .active {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40rpx;
    height: 40rpx;
    background-color: var(--color-theme);
    border-radius: 12rpx 0rpx 20rpx 0rpx;
    opacity: 0;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .drivin-school {
    padding-bottom: 8rpx;
  }
}
